<template>
	<view class="classGoods_box">
		<view class="tab_nav">
			<nav-bar nav_btn="back" :showShare="true" :background="background" :placeholder="placeholder" :color="color"
				:auto_img="img"></nav-bar>
		</view>
		<view class="class_box w100">
			<scroll-view class="scroll-view_H w100 flex" scroll-x="true">
				<view class="class_title_box" v-for="(item,index) in list.categoryModules" :key="index"
					@click="active(item.id)">
					<view id="demo1"
						:class="[cat_id == item.id ? 'scroll-view-item_H_active'  : 'scroll-view-item_H','s26','family','uni-bg-red','txtali']">
						{{item.name}}</view>
					<view class="title_line" v-if="cat_id == item.id"></view>
				</view>
			</scroll-view>
		</view>
		<view class="class_list w100">
			<screen-list :screen_list="screen_list" @setData="getData" :disabled="true" :backStyle="true" :pages="true"
				:showOne="false" :showTwo="true"></screen-list>
		</view>
		<zero-waterfall :list="type == 2 ? goodsTwoList : goodsList"></zero-waterfall>
	</view>
</template>

<script>
	import screenList from '@/components/screen.vue'
	export default {
		components: {
			screenList
		},
		data() {
			return {
				title: '',
				color: 'white',
				img: '../pages/filePages/static/left_jian.png',
				placeholder: '畅销洗发水',
				background: '#EBBE87',
				screen_list: [{
						img: '/static/shopping/pingfen.png',
						txt: '人气爆款'
					},
					{
						img: '/static/shopping/zuixin.png',
						txt: '最新上架'
					},
					{
						img: '/static/shopping/jiage.png',
						txt: '价格排序'
					},
					{
						img: '/static/shopping/renqi.png',
						txt: '评分最高'
					}
				],
				list: {},
				cat_id: 0,
				goodsList: [],
				page: 1,
				totalNum: '',
				goodsTwoList: []
			}
		},
		onLoad(options) {
			this.cat_id = options.id
			this.getInit()
			this.getGoodsList()
		},
		onReachBottom() {
			if (this.page >= this.totalNum) {
				this.$wanlshop.msg('我是有底线的!')
			} else {
				this.page++
				this.getStoreGoods()
			}
		},
		methods: {
			active(id) {
				this.cat_id = id
				this.getGoodsList()
			},
			getInit() {
				this.$request({
					url: 'common/init',
				}).then(res => {
					this.list = res.data.data.modulesData
				})
			},
			getData(val, type) {
				this.type = type
				if (this.type == 2) {
					this.goodsTwoList = val
				} else {
					this.goodsList = val
				}
			},
			getGoodsList() {
				let that = this
				that.$request({
					url: 'product/lists',
					method: 'POST',
					data: {
						cat_id: that.cat_id,
						shop_id: that.$store.state.shop.id
					}
				}).then(res => {
					if (res.data.code = 1) {
						that.goodsList = res.data.data.data
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.classGoods_box {
		overflow: hidden;

		.class_list {
			height: 120upx;
			background: #FFFFFF;
			border-radius: 20upx 20upx 0 0;
			margin-top: -10upx;
			padding-top: 18upx;
			box-sizing: border-box;
		}

		.class_box {
			height: 140upx;
			background-color: #EBBE87;
			padding-left: 32upx;
			box-sizing: border-box;
			overflow: hidden;

			.scroll-view_H {
				white-space: nowrap;
				margin-top: 52upx;

				.class_title_box {
					display: inline-block;
					margin-right: 36upx;

					.scroll-view-item_H {
						color: #FFFFFF;
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.scroll-view-item_H_active {
						color: #FFFFFF;
						font-weight: bold;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.title_line {
						width: 36upx;
						height: 4upx;
						background: #FFFFFF;
						margin: 12upx auto;
						margin-bottom: 0;
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #f4f4f4;
	}
</style>
